<template>
  <el-card
    class="box-card"
    style="background-color: #fff; margin-left: 1%; width: 98%"
  >
    <p
      style="
        border-bottom: 1px solid #ebeef5;
        padding-bottom: 20px;
        margin-bottom: 10px;
      "
    >
      修改密码
    </p>
    <div style="width: 300px; margin-left: 94px">
      <p style="display: flex; margin-top: 10px; margin-bottom: 10px">
        <span style="width: 136px; line-height: 38px; text-align: right"
          >原密码</span
        >
        <el-input
          style="margin-left: 20px"
          placeholder="请输入密码"
          v-model="pwd"
          show-password
        ></el-input>
      </p>
      <span v-show="isOld" style="margin-left: 125px; color: red"
        ><i class="el-icon-close"></i>原密码输入不正确</span
      >
      <p style="display: flex; margin-top: 10px">
        <span style="width: 136px; line-height: 38px; text-align: right"
          >新密码</span
        ><el-input
          style="margin-left: 20px"
          placeholder="请输入密码"
          v-model="newpwd"
          show-password
        ></el-input>
      </p>
      <p style="display: flex; margin-top: 10px; margin-bottom: 10px">
        <span style="width: 136px; line-height: 38px; text-align: right"
          >确认新密码</span
        >
        <el-input
          style="margin-left: 20px"
          placeholder="请输入密码"
          v-model="affirmPsd"
          show-password
        ></el-input>
      </p>
      <span v-show="isNew" style="margin-left: 125px; color: red"
        ><i class="el-icon-close"></i>两次密码不一致！</span
      >
      <div style="margin-top: 20px; margin-left: 115px">
        <el-button @click="clickConfirm" type="primary">确定</el-button>
        <el-button>重置</el-button>
      </div>
    </div>
  </el-card>
</template>

<script>
import { checkoldpwd, editpwd } from "@/apis/users";
let userid = window.localStorage.getItem("id");
export default {
  data() {
    return {
      pwd: "",
      newpwd: "",
      affirmPsd: "",
      isOld: false,
      isNew: false,
      id: userid,
    };
  },
  methods: {
    clickConfirm() {
      checkoldpwd({
        oldPwd: this.pwd,
        id: this.id,
      }).then((res) => {
        if (res.data.code === 1) {
          this.isOld = true;
        } else {
          editpwd({
            newPwd: this.newpwd,
            id: this.id,
          }).then((res) => {
            if (res.data.code === 0) {
              if (!(this.newpwd === this.affirmPsd)) {
                this.isNew = true;
              } else {
                this.$message({
                  message: res.data.msg,
                  type: "success",
                });
                this.$router.push("/");
              }
            }
          });
        }
        console.log(res);
      });
    },
  },
};
</script>

<style lang="less" scoped>
</style>